<template>
  <div class="upload">
    <el-container>
      <el-aside class="upload-aside">
        <div class="section">
          <el-upload
            drag
            :multiple="true"
            action="#"
            :show-file-list="true"
            :auto-upload="false"
            :on-success="handleAvatarSuccess"
            :http-request="uploadUrl"
            ref="upload"
            :before-upload="beforeAvatarUpload">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处<em>上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传mp4文件</div>
          </el-upload>
        </div>
      </el-aside>
      <el-main class="upload-main">
        <div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="行业" prop="industryId">
              <el-select v-model="ruleForm.industryId" placeholder="请选择行业">
                <el-option v-for="industry in industryList" :key="industry.id" :label="industry.industryName"
                           :value="industry.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分类" prop="categoryId">
              <el-select v-model="ruleForm.categoryId" placeholder="请选择分类">
                <el-option v-for="category in categoryList" :key="category.id" :label="category.categoryName"
                           :value="category.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品名称" prop="productName" style="width: 40%">
              <el-input v-model="ruleForm.productName"></el-input>
            </el-form-item>
            <el-form-item label="投放平台" prop="platformId">
              <el-select v-model="ruleForm.platformId" placeholder="请选择投放平台">
                <el-option v-for="platform in platformList" :key="platform.id" :label="platform.platformName"
                           :value="platform.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
              <el-button @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import mixin from '../mixins'
import {upload, getCategoryList, getIndustryList, getPlatformList} from '../api/index'

export default {
  name: 'upload',
  mixins: [mixin],
  data () {
    return {
      imageUrl: '',
      ruleForm: {
        industryId: '',
        categoryId: '',
        productName: '',
        platformId: ''
      },
      industryList: [],
      categoryList: [],
      platformList: [],
      formData: '',
      rules: {
        industryId: [
          {required: true, message: '请选择行业', trigger: 'blur'}
        ],
        categoryId: [
          {required: true, message: '请选择分类', trigger: 'blur'}
        ],
        productName: [
          {required: true, message: '请输入产品名称', trigger: 'blur'}
        ],
        platformId: [
          {required: true, message: '请选择投放平台', trigger: 'blur'}
        ]
      }
    }
  },

  created () {
    this.getCategoryList()
    this.getIndustryList()
    this.getPlatformList()
  },

  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  methods: {
    uploadUrl (param) {
      this.formData.append('files', param.file)
    },
    handleAvatarSuccess (res, file) {
      if (res.code === 200) {
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 1000
        })
      } else {
        this.$message({
          message: '修改失败',
          type: 'error',
          duration: 1000
        })
      }
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'video/mp4'
      if (!isJPG) {
        this.$message.error('上传视频只能是 MP4 格式!')
      }
      return isJPG
    },

    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formData = new FormData()
          this.$refs.upload.submit()
          this.formData.append('industryId', this.ruleForm.industryId)
          this.formData.append('categoryId', this.ruleForm.categoryId)
          this.formData.append('productName', this.ruleForm.productName)
          this.formData.append('platformId', this.ruleForm.platformId)
          let _this = this
          let token = _this.$store.getters.token
          let config = {
            headers: {
              'Content-Type': 'multipart/form-data',
              'Authorization': token
            }
          }
          upload(this.formData, config).then(res => {
            if (res.data.code === 200) {
              _this.$message.success('上传成功')
              _this.$router.push('/')
            }
          }).catch(err => {
            _this.$message.error('上传失败')
          })
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },

    getIndustryList () {
      getIndustryList().then(res => {
        this.industryList = res.data
      }).catch(err => {
        console.log(err)
      })
    },

    getCategoryList () {
      getCategoryList().then(res => {
        this.categoryList = res.data
      }).catch(err => {
        console.log(err)
      })
    },

    getPlatformList () {
      getPlatformList().then(res => {
        this.platformList = res.data
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/upload.scss';
</style>
